<template>
	<view class="material">
		<view class="content">
			<!-- 头像显示 -->
			<view class="touxian">
				<image class="weidenglu" @click="chooseImages" :src="head_url" mode="scaleToFill" style="width: 100rpx; height: 100rpx;"></image>
				<image v-if="head_urlplay" class="touxiang" src="../../../static/image/qita/touxiang.png" mode="scaleToFill" style="width: 26rpx; height: 26rpx;"></image>
			</view>
			<!-- 填写信息内容 -->
			<view class="form">
				<view class="userName">
					<label><text class="xinghao">*</text>姓名</label>
					<input type="text" v-model="user_name" placeholder="姓名">
				</view>
				<view class="region">
					<label><text class="xinghao">*</text>性别</label>
					<view @click="males" class="males">
						<text class="yuandian" :class="male == 1 ? 'active': ''"></text><text>男</text>
					</view>
					<view @click="females" class="females">
						<text class="yuandian" :class="male == 2 ? 'active': ''"></text><text>女</text>
					</view>
				</view>

				<view class="title">
					<label><text class="xinghao">*</text>职称</label>
					<input type="text" v-model="pro_title" placeholder="请输入">
				</view>
				<view class="education">
					<label>学历</label>
					<picker class="pickers" @change="bindPickerChange" :value="educationIndex" :range="educationArr">
						<view class="uni-input viewInput">{{educationArr[educationIndex]}}</view>
						<text class="iconfont icon-xiajiantou icons"></text>
					</picker>
				</view>
				<view class="university">
					<label><text class="xinghao">*</text>毕业院校</label>
					<input type="text" v-model="school" placeholder="请输入">
				</view>
				<view class="birth">
					<label>出生年月</label>
					<view @tap="show"><text class="qingshuru">{{days}}</text> <text class="iconfont icon-xiajiantou"></text></view>
				</view>
				<view class="clinicmaingraph">
					<view class="zhiyezhengshu">
						<label><text class="xinghao">*</text>执业证书(一张)</label>
						<text @click="clinicmaingraph" class="tianjia"><text>添加</text>+</text>
					</view>
					<view v-if="cerad_title" class="images">
						<image v-for="(item,index) in cerad_title" :key="item.id" :src="item" mode="scaleToFill" style="width: 100rpx; height: 100rpx;"></image>
					</view>
				</view>

				<view class="personal">
					<label><text class="xinghao">*</text>个人介绍</label>
					<input type="text" v-model="referral" placeholder="输入内容" cursor-spacing="20"/>
				</view>

				<view class="addPicture">
					<view class="addXinghao">
						<text class="addPictureXinghao">*</text>
						<text>添加图片(最多四张)</text>
					</view>
					<view class="imagess">
						<image v-for="(item,index) in addPicture" :key="item.id" :src="item" mode="scaleToFill" style="width: 150rpx; height: 150rpx;"></image>
						<view @click="addPictures">
							<text class="jiahao">+</text>
						</view>
					</view>
				</view>

			</view>
			<!-- 时间选择器 -->
			<e-picker-plus mode="YMD" startYear="1920" end="2000-12-31" ref="picker" @confirm="confirm" />

			<!-- 点击按钮 -->
			<view class="joinDetails" @click="examines">
				<text>提交</text>
			</view>

		</view>
	</view>
</template>
<script>
	export default {
		onShow() {
			// 获取oos上传
			this.uploadOosMethos();
			this.endTime = this.getEndTime();
			this.service_ids = this.$store.state.service_id;
			this.openids = this.$store.state.openid;
		},
		data() {
			return {
				//服务id
				service_ids: null,
				openids: null,

				// 当选择了头像就不显示照相机了
				head_urlplay: 1,
				// 当选择了头像就不显示照相机了

				// 学历下标
				educationIndex: 0,
				educationArr: ["请选择", "高中", "大专", "本科", "硕士", "博士"],
				// 学历下标

				male: 1,
				headPortrait: null,
				addPicture: null,

				// 用于提交数据给后台的
				head_url: "../../../static/image/qita/weidenglu.png",
				head_urls: null,
				user_name: null,
				pro_title: null,
				back_title: null,
				school: null,
				days: "请选择",
				cerad_title: null,
				cerad_titles: null,
				referral: null,
				image_urls: [],

				// 当前之后的时间
				endTime: null,

				// 上传的图片设置
				host: null,
				OSSAccessKeyId: null,
				dir: null,
				policy: null,
				signature: null,
			};
		},
		methods: {
			// 获取oos的地址
			async uploadOosMethos() {
				let fileGetUrl = await this.$myrequest({
					url: `File/get`
				});
				this.host = fileGetUrl.data.data.host;
				this.OSSAccessKeyId = fileGetUrl.data.data.accessid;
				this.dir = fileGetUrl.data.data.dir;
				this.policy = fileGetUrl.data.data.policy;
				this.signature = fileGetUrl.data.data.signature;
			},

			// 获取当前的时间
			getEndTime() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				return `${year}-${month}-${day}`;
			},

			// 学历选择器
			bindPickerChange(e) {
				this.educationIndex = e.target.value;
			},
			// 学历选择器

			// 时间选择器
			show() {
				this.$refs.picker.show()
			},
			confirm(e) {
				this.days = e.detail.value;
			},
			// 时间选择器

			// ==诊所主图==
			clinicmaingraph() {
				let self = this;
				uni.chooseImage({
					count: 1,
					success: res => {
						this.cerad_title = res.tempFilePaths;

						let fileName = `${Date.now()}${res.tempFilePaths[0].substr(-4)}`;
						let key = `${self.dir}${fileName}`;

						self.cerad_titles = `${self.host}/${self.dir}${fileName}`;

						uni.uploadFile({
							url: self.host,
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								key,
								policy: self.policy,
								OSSAccessKeyId: this.OSSAccessKeyId,
								signature: this.signature
							},
							success: res => {
								console.log(`诊所主图`);
							}
						});

					}
				});
			},

			// 头部图像
			async chooseImages() {
				this.head_urlplay = 0;
				let self = this;

				uni.chooseImage({
					count: 1,
					success: res => {
						this.head_url = res.tempFilePaths;

						let fileName = `${Date.now()}${res.tempFilePaths[0].substr(-4)}`;
						let key = `${self.dir}${fileName}`;
						self.head_urls = `${self.host}/${self.dir}${fileName}`;

						try {
							uni.uploadFile({
								url: self.host,
								filePath: res.tempFilePaths[0],
								name: 'file',
								formData: {
									key,
									policy: self.policy,
									OSSAccessKeyId: this.OSSAccessKeyId,
									signature: this.signature
								},
								success: res => {
									if (res.statusCode === 204) {
										console.log('头像上传成功');
									}
								},
								fail: err => {
									console.error(err);
								}
							});
						} catch (err) {
							console.error(err);
						};
					}
				});
			},

			examines() {
				let self = this;
				if (this.head_url.indexOf("../../../") != -1) {
					uni.showToast({
						title: "头像必填",
						icon: "none"
					})
					return false;
				};
				if (this.user_name === null) {
					uni.showToast({
						title: "姓名必填",
						icon: "none"
					})
					return false;
				};
				if (this.male === "" || this.male === null) {
					uni.showToast({
						title: "性别必填",
						icon: "none"
					})
					return false;
				};
				if (this.pro_title === null) {
					uni.showToast({
						title: "职称必填",
						icon: "none"
					})
					return false;
				};
				if (this.educationIndex === 0) {
					uni.showToast({
						title: "请选择学历",
						icon: "none"
					})
					return false;
				};
				if (this.days === "" || this.days === null || this.days === "请选择") {
					uni.showToast({
						title: "出生年月必填",
						icon: "none"
					})
					return false;
				};
				if (this.school === "" || this.school === null) {
					uni.showToast({
						title: "毕业院校必填",
						icon: "none"
					})
					return false;
				};
				if (this.cerad_title === null) {
					uni.showToast({
						title: "职业证书必填",
						icon: "none"
					})
					return false;
				};
				if (this.referral === "" || this.referral === null) {
					uni.showToast({
						title: "个人介绍必填",
						icon: "none"
					})
					return false;
				};
				if (this.addPicture === null) {
					uni.showToast({
						title: "图片必填",
						icon: "none"
					})
					return false;
				};

				let service_id = self.service_ids;
				let openid = self.openids;
				let indexs = self.educationIndex;
				// 上传头像
				let head_url = self.head_urls;
				let user_name = self.user_name;
				let sex = self.male;
				let pro_title = self.pro_title;
				let back_title = self.educationArr[indexs];
				let school = self.school;
				let days = self.days;
				let cerad_title = self.cerad_titles.toString();
				let referral = self.referral;
				let image_url = self.image_urls.toString();

				uni.request({
					url: 'https://chat.assessgeek.com/api/Doctor/getList',
					method: "POST",
					data: {
						service_id,
						openid,
						head_url,
						user_name,
						sex,
						pro_title,
						back_title,
						school,
						days,
						cerad_title,
						referral,
						image_url
					},
					success: res => {
						if (res.data.code == "200") {
							uni.redirectTo({
								url: "../examine4/examine1/examine1"
							});
						};
					},
					fail: err => {
						console.error(err);
					}
				});
			},

			// 添加多张图片
			addPictures() {
				let self = this;
				uni.chooseImage({
					count: 4,
					success: res => {
						this.addPicture = res.tempFilePaths;

						for (let [keys, value] of Object.entries(res.tempFilePaths)) {

							let fileName = `${Date.now()+1}${value.substr(-4)}`;
							let key = `${self.dir}${fileName}`;
							self.image_urls.push(`${self.host}/${self.dir}${fileName}`);
							uni.uploadFile({
								url: self.host,
								filePath: value,
								name: 'file',
								formData: {
									key,
									policy: self.policy,
									OSSAccessKeyId: this.OSSAccessKeyId,
									signature: this.signature
								},
								success: res => {
									console.log(`四张头像上传`);
								}
							});
						};
					}
				});
			},

			males() {
				this.male = 1;
			},

			females() {
				this.male = 2;
			}
		}
	}
</script>
<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}

	.material {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		padding: 0 30rpx;
	}

	.touxian {
		height: 216rpx;
		position: relative;
		@include shuipingchuijuzhong;

		.weidenglu {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.touxiang {
			position: absolute;
			top: calc(50% + 10rpx);
			left: calc(50% + 25rpx);
		}
	}

	.form {
		>view {
			&:not(:first-of-type) {
				margin-top: 16rpx;
			}
		}
	}

	// 小红点
	.xinghao {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		color: #FF0000;
	}

	.userName,
	.title,
	.zhiyezhengshu,
	.university {
		height: 100rpx;
		@include chuizhilianduan;
		background-color: #F7F8FC;
		border-radius: 8rpx;
		position: relative;
		padding: 0 40rpx;

		>input {
			text-align: right;
		}
	}

	// 职业证书
	.clinicmaingraph {
		width: 100%;

		.zhiyezhengshu {
			.tianjia {
				color: #B8B9BB;
			}
		}
	}

	// 职业证书

	// 性别样式
	.region {
		display: flex;
		align-items: center;
		height: 100rpx;
		background-color: #F7F8FC;
		border-radius: 8rpx;
		position: relative;
		padding: 0 40rpx;

		.yuandian {
			display: inline-block;
			width: 18rpx;
			height: 18rpx;
			border: 2rpx solid #808080;
			margin-right: 10rpx;
			border-radius: 50%;
		}


		.males,
		.females {
			display: inline-block;
			width: 80rpx;
			@include shuipingchuijuzhong;
		}

		.males {
			margin-left: 365rpx;
			margin-right: 30rpx;
		}

		.active {
			background-color: #2DD1BC !important;
			border: 2rpx solid #2DD1BC !important;
		}
	}

	// 学历
	.education {
		height: 100rpx;
		@include chuizhilianduan;
		background-color: #F7F8FC;
		border-radius: 8rpx;
		position: relative;
		padding: 0 40rpx;

		.pickers {
			background-color: #F7F8FC;

			.viewInput {
				background-color: #F7F8FC;
				padding: 0;
				margin: 0;
				color: #B8B9BB;
			}
		}
	}


	// 出生年月日
	.birth {
		height: 100rpx;
		@include chuizhilianduan;
		background-color: #F7F8FC;
		border-radius: 8rpx;
		position: relative;
		padding: 0 40rpx;

		>view {
			color: #A9A9AC;
		}
	}

	// 个人介绍
	.personal {
		height: 157rpx;
		@include chuizhilianduan;
		background-color: #F7F8FC;
		border-radius: 8rpx;
		position: relative;
		padding: 0 40rpx;
		flex-wrap: wrap;

		label {
			width: 100%;
		}

		>input {
			width: 100%;
			color: #A9A9AC;
		}
	}

	// 添加图片
	.addPicture {
		margin: 20rpx auto;
		border-radius: 10rpx;
		margin-bottom: 175rpx;

		>view {
			&:first-of-type {
				border-radius: 10rpx;
				height: 100rpx;
				background-color: rgba(247, 248, 252, 1);
				padding: 20rpx;
				@include chuizhilianduan;
			}
		}

		.imagess {
			background-color: rgba(247, 248, 252, 1);
			border-radius: 0 0 10rpx 10rpx;
			padding-bottom: 30rpx;
			display: flex;

			image {
				margin-left: 20rpx;
			}

			view {
				display: inline-block;
				width: 150rpx;
				height: 150rpx;
				border: 2rpx dashed #C6C6CA;
				margin-left: 20rpx;
				text-align: center;
				line-height: 150rpx;

				.jiahao {
					font-size: 56rpx;
					color: #BBBCBD;
				}
			}
		}
	}

	.joinDetails {
		@include dibuanniu;
		width: 687rpx;
	}

	.education {
		padding-right: 60rpx;

		.icons {
			@include chuizhi;
			right: 20rpx;
			color: #B3B4B7;
		}
	}

	// 职业证书
	.images {
		background-color: rgba(247, 248, 252, 1);
		border-radius: 0 0 10rpx 10rpx;
		padding-bottom: 30rpx;

		image {
			margin-left: 20rpx;
		}

		view {
			display: inline-block;
			width: 150rpx;
			height: 150rpx;
			border: 2rpx solid red;
			margin-left: 20rpx;
		}
	}

	.addXinghao {
		position: relative;

		>text {
			&:last-of-type {
				transform: translateX(20rpx);
			}
		}

		.addPictureXinghao {
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			color: #FF0000;
		}
	}
</style>
